<template>
  <div>
    <!-- 修改用户信息 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      @close="editUserCancel"
    >
      <el-form :model="form">
        <!-- <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://39.108.143.183:8181/public/uploadAvatar/"
            :show-file-list="false"
            :with-credentials="true"
            :headers="importHeaders"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" :key="form.avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.password !== undefined"
          label="密码"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="form.roleId" placeholder="请选择">
            <el-option label="viewer" value="0">viewer</el-option>
            <el-option label="admin" value="1">admin</el-option>
            <el-option label="editor" value="2">editor</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editUserCancel">取 消</el-button>
        <el-button type="primary" @click="editUserOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加用户 -->
    <el-dialog
      :title="title"
      :visible.sync="addFormVisible"
      @close="addUserCancel"
    >
      <el-form :model="form">
        <!-- <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://39.108.143.183:8181/public/uploadAvatar/"
            :show-file-list="false"
            :with-credentials="true"
            :headers="importHeaders"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" :key="form.avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.password !== undefined"
          label="密码"
          :label-width="formLabelWidth"
        >
          <el-input
            type="password"
            v-model="form.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="form.roleId" placeholder="请选择">
            <el-option label="viewer" value="0">viewer</el-option>
            <el-option label="admin" value="1">admin</el-option>
            <el-option label="editor" value="2">editor</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserCancel">取 消</el-button>
        <el-button type="primary" @click="addUserOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改数据源信息 -->
    <el-dialog
      :title="title"
      :visible.sync="editDataSourceFormVisible"
      @close="editDataSourceCancel"
    >
      <el-form :model="form">
        <el-form-item label="dataSourceId" :label-width="formLabelWidth">
          <el-input
            disabled
            v-model="form.dataSourceId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="dataSourceType" :label-width="formLabelWidth">
          <el-input v-model="form.dataSourceType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="databaseName" :label-width="formLabelWidth">
          <el-input v-model="form.databaseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="dataSourceLink" :label-width="formLabelWidth">
          <el-input v-model="form.dataSourceLink" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="dataSourceUser" :label-width="formLabelWidth">
          <el-input v-model="form.dataSourceUser" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="dataSourcePassword" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="form.dataSourcePassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDataSourceCancel">取 消</el-button>
        <el-button type="primary" @click="editDataSourceOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加数据 -->
    <el-dialog
      :title="title"
      :visible.sync="addDataSourceFormVisible"
      @close="addDataSourceCancel"
    >
      <el-form :model="form">
        <el-form-item label="dataSourceType" :label-width="formLabelWidth">
          <el-input v-model="form.dataSourceType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="databaseName" :label-width="formLabelWidth">
          <el-input v-model="form.databaseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="dataSourceLink" :label-width="formLabelWidth">
          <el-input v-model="form.dataSourceLink" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="dataSourceUser" :label-width="formLabelWidth">
          <el-input v-model="form.dataSourceUser" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="dataSourcePassword" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="form.dataSourcePassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDataSourceCancel">取 消</el-button>
        <el-button type="primary" @click="addDataSourceOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const mytoken = localStorage.getItem("token");
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    form: {},
    editFormVisible: {
      type: Boolean,
      default: false,
    },
    addFormVisible: {
      type: Boolean,
      default: false,
    },
    editDataSourceFormVisible: {
      type: Boolean,
      default: false,
    },
    addDataSourceFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // console.log("zct form avator", this.form);
  },
  data() {
    return {
      formLabelWidth: "120px",
      importHeaders: { token: mytoken },
    };
  },
  watch: {},
  methods: {
    editUserOk() {
      this.$emit("editUserOk", this.form);
    },
    addUserOk() {
      this.$emit("addUserOk", {
        avatar: this.form.avatar,
        userName: this.form.userName,
        email: this.form.email,
        phone: this.form.phone,
        password: this.$getRsaCode(this.form.password),
        roleId: this.form.roleId,
      });
    },
    editUserCancel() {
      this.$emit("editUserCancel", false);
    },
    addUserCancel() {
      this.$emit("addUserCancel", false);
    },

    editDataSourceOk() {
      this.$emit("editDataSourceOk", this.form);
    },
    addDataSourceOk() {
      this.$emit("addDataSourceOk", this.form);
    },
    editDataSourceCancel() {
      this.$emit("editDataSourceCancel", false);
    },
    addDataSourceCancel() {
      this.$emit("addDataSourceCancel", false);
    },

    // 头像上传
    handleAvatarSuccess(res, file) {
      this.form.avatar = URL.createObjectURL(file.raw);
      // console.log("zct imageUrl", this.form.avatar);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-upload {
  border: 1px dashed rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>